<div v-deep v-bind="$attrs" class="host">
    <div v-deep class="sectors-container" ref="nativeQuery">
        <div v-for="(item, index) in sectors" v-deep class="sector-view">
            <div v-deep class="sector-header">扇区 {{index}}</div>
            <my-mf-sector-editor class="blocks-container sector-editor" v-deep :is_manufacture="enableM1CFunc && index === 0" :auto_value_block_check="enableM1CFunc" :data="item" :uppercase="uppercase"></my-mf-sector-editor>
        </div>
        <div v-if="isEmpty" v-deep class="empty-view">空文件</div>
    </div>

    <div v-deep class="examples mfsector-editor">
        <b style="color: #737373; margin-right: 0.5em;">图例:</b>
        <span class="token token-normal">数据</span>
        <span class="token token-manufacture">UID&厂商信息</span>
        <span class="token token-value-block">值块</span>
        <span class="token token-keya">密钥A</span>
        <span class="token token-keyb">密钥B</span>
        <span class="token token-acl">访问控制</span>
        <span class="token token-gpb" title="General Propose Bit">GPB</span>
        <span class="token token-unknown">未知</span>
    </div>

    <div v-if="0">
        <div>trashbin</div>

        <div v-for="(data, dataIndex) in item" v-deep class="block-view">
            <span v-if="(dataIndex === 0)" class="token token-trailer">{{data}}</span>
            <template v-else-if="(dataIndex === 3)">
                <span class="token token-keya">{{data.substring(0, 12)}}</span>
                <span class="token token-acl">{{data.substring(12, 18)}}</span>
                <span class="token token-normal">{{data.substring(18, 20)}}</span>
                <span class="token token-keyb">{{data.substring(20)}}</span>
            </template>
            <span v-else class="token token-normal">{{data}}</span>
        </div>
    </div>
</div>

<style>
.host>>> {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.empty-view>>> {
    font-size: x-large;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.sectors-container>>> {
    flex: 1;
    display: flex;
    flex-direction: column;
    /* align-items: center; */
    overflow: auto;
}
.sector-view>>> {
    border-bottom: 1px dotted gray;
    margin: 0 auto;
}
.sector-view[v-deep]+.sector-view>>> {
    margin-top: 0.5em;
}
.sector-header>>> {
    font-family: Consolas, monospace;
    color: #1100aa;
}
.examples>>> {
    display: flex;
    margin-top: 0.5em;
    overflow: auto;
    white-space: nowrap;
}

.examples>>> .token+.token {
    margin-left: 0.5em;
    border-left: 1px solid #7f7f7f;
    padding-left: 0.5em;
}
</style>
